<meta charset="utf-8">
<script src="static/admin/js/model/rbac/department/Department.js" type="text/javascript" charset="utf-8"></script>
<div class="user-layout-north">
	<div class="north-menu">
		<ul class="left">
			<div class="button-group">
			  <button type="button" class="button active" onclick="operator_item(this);">列表</button>
			  <button type="button" class="button" ference="master" exec_method="add" onclick="operator_item(this);">添加</button>
			  <button type="button" class="button" reference="master" onclick="operator_item(this);" disabled="disabled">编辑</button>
			  <button type="button" class="button" onclick="operator_item(this);" disabled="disabled">删除</button>
			  <button type="button" class="button" onclick="operator_item(this);" disabled="disabled">冻结</button>
			  <button type="button" class="button" exec_method="thaw" onclick="operator_item(this);" not_move="true" disabled="disabled">解冻</button>
			</div>
		</ul>
		<ul style="float:right;" class="button-return">
			<li>
				<button class="button button-little" onclick="operator_item($('.north-menu .button-group button:first'),'return');" style="display: none;">返回</button>
			</li>
		</ul>
	</div>
</div>
<div class="user-layout-center" style="overflow: hidden;">
	<div class="easyui-panel" id="auto_panel" style="position: absolute;height: 100%;width: 100%;" data-options="border:false">
		<table id="department-lists" class="auto_panel"></table>
	</div>
	
	<div class="move_right">
		<form method="post">
			<table class="qikeke-grid">
				<tr>
					<td>部门名称:</td>
					<td>
						<input data-options="maxLength:5"  style="width: 134px;" name="departmentName" type="text" class="easyui-textbox" required="required" />
						<input type="hidden" name="departmentId" type="text" />
					</td>
					<td>部门描述:</td>
					<td>
						<input style="width: 134px;" name="departmentDescription" type="text" class="easyui-textbox" />
					</td>
				</tr>
				<tr>
					<td>上级部门:</td>
					<td colspan="3">
					</td>
				</tr>
				<tr>
					<td colspan="4" style="text-align: right;padding-right: 10px;border-bottom: 0;">
						<button type="button" onclick="$department.save();" class="button bg-sub">提交</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div class="move_right">
		
	</div>
	<div class="move_right">
		
	</div>
	<div class="move_right">
		<div class="dialog open">
		  <div class="dialog-head">
		    <span class="dialog-close close rotate-hover"></span>
		    <strong>温馨提示</strong>
		  </div>
		  <div class="dialog-body">
		   	确定要冻结这条数据么?
		  </div>
		  <div class="dialog-foot">
		    <button class="button button-small dialog-close">取消</button>
		    <button class="button button-small bg-green">确认</button>
		  </div>
		</div>
	</div>
	<div class="move_right">
		<div class="alert alert-green" style="position: absolute;top:50%;left:50%;margin-left:-150px;margin-top:-50px;width:300px;z-index: 999;"></div>
	</div>
</div>

<script type="text/javascript">
	var $department = new Department();

	$department.treegrid = $("#department-lists");
	$department.toolbars = [];//如何等于空将默认赋值[$('.button-group button:eq(1)'),$('.button-group button:eq(2)')]...四个按钮(除添加之外);
	$department.dialog = $("#department_dialog");
	$department.form = $(".move_right:eq(0) form");
	
	$department.addUrl = 'alsdfasdf.html';
	
	$department.init('model/rbac/department/list.json');//传进去的url用于显示网格数据
	
	
	function move_list_by_direction(direction){
		if(direction=='left'){//左边方向
			$("#auto_panel").each(function(){
				$(this).dequeue();
			}).animate({
				'margin-left':0
			},{
				duration: 1000,
				easing:'easeInOutCirc'
			});
		}else if(direction=='right'){//右边方向
			$("#auto_panel").each(function(){
				$(this).dequeue();
			}).animate({
				'margin-left':-$("#auto_panel").width()-200
			},{
				duration: 1000,
				easing:'easeInOutCirc'
			});
		}
	}
	
	function move_oper_by_direction(direction,index){
		if(index==0){
			move_list_by_direction(direction);
			index = $('.north-menu .button-group button.active').index();
		}
		
		index = index-1;
		
		if(direction=='left'){//左边方向
			$(".move_right").eq(index).css({
				'left':0,
				'opacity':1
			}).each(function(){
				$(this).dequeue();
			}).show().animate({
				'left':$("#auto_panel").width(),
				'opacity':0
			},{
				duration: 1200,
				easing:'easeInOutCirc'
			});
		}else if(direction='right'){//右边方向
			$(".move_right").eq(index).css({
				'left':$("#auto_panel").width(),
				'opacity':0
			}).each(function(){
				$(this).dequeue();
			}).show().animate({
				'left':0,
				'opacity':1
			},{
				duration: 1200,
				easing:'easeInOutCirc'
			});
		}
	}
	
	function operator_item(self){
		var $self = $(self);
		
		if($self.hasClass('active')){//当前活动选项,不给于点击
			return;
		}
		
		if($self.attr('not_move')&&$self.attr('not_move')!=''){//判断是否是无移动操作
			if($self.attr('not_move')=='true'){//不移动
				
				if($self.index()!=0&&$self.attr('exec_method')&&$self.attr('exec_method')!=''){
					$department[($self.attr('exec_method'))]($self);
				}
				
				return;
			}
		}
		if($self.index()==0){
			$('.button-return button').each(function(){
				$(this).dequeue();
			}).fadeOut();
		}
		
		var direction = 'left',reference=false,upobj=null;
		if($self.index()!=0){
			direction = 'right';
			
			if($self.attr('exec_method')&&$self.attr('exec_method')!=''){
				$department[$self.attr('exec_method')]($self);
			}
			
			$('.button-return button').each(function(){
				$(this).dequeue();
			}).show();
			
			if($self.attr('reference')&&$self.attr('reference')!=''){
				$self = $self.parent().find('button[ference='+$self.attr('reference')+']');
				if(!$self[0]){
					alert('引用配置错误');
				}else{
					reference = true;
				}
			}
		}else{
			var p = null;
			if((p = $self.parent().find('button.active[reference!=""]'))[0]){
				var m = $self.parent().find('button[ference='+p.attr('reference')+']');
				if(m[0]){
					upobj = $($self);
					$self = m;
				}
			}
		}
		
		move_list_by_direction(direction);
		move_oper_by_direction(direction,$self.index());
			
		$self.parent().find('.active').removeClass('active');
		$self.parent().find('button:gt(0)').attr('disabled',true);
		
		if(reference){
			$self.parent().find('button[reference='+$self.attr('ference')+']').addClass('active').attr('disabled',false);
		}else{
			if(!upobj){
				$self.addClass('active').attr('disabled',false);
			}else if(arguments.length==2){
				$self = $self.parent().find('button:first').addClass('active').attr('disabled',false);
			}else{
				return_button_status();
			}
		}
		
		
		if($self.index()==0){
			$self.next().attr('disabled',false);//开启添加
			return_button_status();
		}
	}
	
	function return_button_status(){//还原按钮初始化状态
		$department.rowClick();
	}
	
</script>

<style type="text/css">
	.north-menu{
		margin:10px 10px 0 10px;
	}
	.north-menu ul{
		float: left
	}
	.north-menu span{
		margin-right: 4px;
	}
	.move_right{
		height: 100%;
		width: 100%;
		position: absolute;
		top:0px;
		left:0px;
		display: none;
	}
	
	.user-layout-center{position:absolute;left:0;}
	.user-layout-center{top:60px;bottom:10px;_height:100%;overflow:auto;}
	.user-layout-center{_position:relative;background:white;left:10px;right:10px;_top:0;_left:0;_margin-left:10px;}
	
</style>